<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;
            height: 200px;
        }
        #box{
            width: 720px; /*三列为720 四列为960 五列为1200*/
            overflow: hidden;
        }
        #item{
            width: 200px;
            margin: 20px;
            float: left;
        }
        button{
            width: 40px;
        }
        p{
            text-align: center;
        }
        p:last-child{
            color: orange;
        }
        
    </style>
</head>
<body>
    <div>
        <button id="bt1">3</button>
        <button id="bt2">4</button>
        <button id="bt3">5</button>
    </div>
    <div id="box">
        <div id="item">
            <div>
                <div><img src="1.jpg" alt=""></div>
            </div>
            <p>天蓝</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="2.jpg" alt=""></div>
            </div>
            <p>藏青</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="3.jpg" alt=""></div>
            </div>
            <p>草莓</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="4.jpg" alt=""></div>
            </div>
            <p>冰淇淋</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="5.jpg" alt=""></div>
            </div>
            <p>奶油</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="6.jpg" alt=""></div>
            </div>
            <p>夕阳</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="1.jpg" alt=""></div>
            </div>
            <p>天蓝</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="2.jpg" alt=""></div>
            </div>
            <p>藏青</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="3.jpg" alt=""></div>
            </div>
            <p>草莓</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="4.jpg" alt=""></div>
            </div>
            <p>冰淇淋</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="5.jpg" alt=""></div>
            </div>
            <p>奶油</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="6.jpg" alt=""></div>
            </div>
            <p>夕阳</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="1.jpg" alt=""></div>
            </div>
            <p>天蓝</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="2.jpg" alt=""></div>
            </div>
            <p>藏青</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="3.jpg" alt=""></div>
            </div>
            <p>草莓</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="4.jpg" alt=""></div>
            </div>
            <p>冰淇淋</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="5.jpg" alt=""></div>
            </div>
            <p>奶油</p>
            <p>RMB:599</p>
        </div>
        <div id="item">
            <div>
                <div><img src="6.jpg" alt=""></div>
            </div>
            <p>夕阳</p>
            <p>RMB:599</p>
        </div>
    </div>
    <script>
        var box_obj = document.getElementById('box')
        function $(id_name){
            return typeof id_name === 'string' ? document.getElementById(id_name) : null;
        }
        $('bt1').onclick = function(){
            box_obj.style.width = '720px';
        }
        $('bt2').onclick = function(){
            box_obj.style.width = '960px';
        }
        $('bt3').onclick = function(){
            box_obj.style.width = '1200px';
        }
    </script>
</body>
</html>